<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { fetchIntercityTicketSetListAPI } from '@/apis/fetchIntercityTicketSetList'
import type { IntercityTicketSet, LoadMoreData } from '@/types/api'
import { useUserInfoStore } from '@/store/userInfo'
import { IntercityOrderType } from '@/types/enum'

const router = useRouter()
const userInfoStore = useUserInfoStore()

// 分页列表数据
const { dataList, loading, loadingMore, noMore, loadMore } = useLoadMore<LoadMoreData<IntercityTicketSet>>(
  fetchData,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

/**
 * @description 分页服务函数
 */
async function fetchData(d?: LoadMoreData<IntercityTicketSet>): Promise<LoadMoreData<IntercityTicketSet>> {
  // 当前页数
  const _page = d?.page ? d.page + 1 : 1

  const res = await fetchIntercityTicketSetListAPI(
    { page: _page.toString(), limit: '10' },
    userInfoStore.userInfo!.token!,
  )

  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}

function handleBuyIntercityTicket(order_type: IntercityOrderType, id: string) {
  router.push({
    name: 'buyIntercityTicket',
    params: {
      order_type: order_type.toString(),
      id,
    },
  })
}
</script>

<template>
  <Spacer height="24" />
  <view class="px-24rpx">
    <view v-for="item in dataList" :key="item.id" class="mb-24rpx rounded-30rpx bg-white px-30rpx pb-37rpx pt-53rpx">
      <view class="flex items-center justify-between">
        <Address dot-color="#3F8BF6">
          <view class="text-30rpx">
            起点：{{ item.start_place || '未知' }}
          </view>
        </Address>
        <view class="relative">
          <image
            class="h-9rpx w-136rpx"
            src="@/static/images/arrow_right_long.png"
          />
          <view class="absolute text-center text-24rpx text-#999999 font-medium x-center -top-12rpx">
            出发
          </view>
        </view>
        <Address dot-color="#FA662F">
          <view class="text-30rpx">
            终点：{{ item.end_place || '未知' }}
          </view>
        </Address>
      </view>
      <Spacer height="30" />
      <view class="rounded-30rpx bg-#F6F8FC p-30rpx">
        <view class="flex items-center justify-between">
          <view class="flex items-center">
            <image
              class="h-29rpx w-33rpx"
              src="@/static/images/ticket.png"
            />
            <Spacer width="12" />
            <view class="text-28rpx text-#333333">
              城际合成车票（定金）
            </view>
          </view>
          <view class="text-32rpx text-#F53B25">
            ¥{{ item.passenger_price || '0' }}/人
          </view>
        </view>
        <Spacer height="24" />
        <view class="flex items-center justify-between">
          <view class="flex items-center">
            <image
              class="h-29rpx w-33rpx"
              src="@/static/images/parcel.png"
            />
            <Spacer width="12" />
            <view class="text-28rpx text-#333333">
              城际合成捎件（定金）
            </view>
          </view>
          <view class="text-32rpx text-#F53B25">
            ¥{{ item.delivery_price || '0' }}/张
          </view>
        </view>
      </view>
      <Spacer height="30" />
      <view class="flex items-center justify-end">
        <RGButton type="secondary" size="medium" corner="small" @tap="handleBuyIntercityTicket(IntercityOrderType.城际捎件, item.id.toString())">
          城际捎件
        </RGButton>
        <Spacer width="20" />
        <RGButton type="primary" size="medium" corner="small" @tap="handleBuyIntercityTicket(IntercityOrderType.城际购票, item.id.toString())">
          购买车票
        </RGButton>
      </view>
    </view>
    <uv-load-more v-if="dataList.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
  </view>
  <Spacer height="180" />
  <uv-loading-page :loading="loading && !loadingMore" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'intercityList'
style:
  navigationBarTitleText: '城际合成'
</route>
